<template>
  <u-mask
    class="mask"
    :zoom="false"
    :show="props.isShow"
    :custom-style="{ height: tools.clientTopHight(), bottom: '100rpx', top: 'auto' }"
    @click="emit('close', false)"
  >
    <view class="content">
      <view class="header">
        分享
        <image class="close" src="/pagesA/static/image/28.png"></image>
      </view>
      <view class="bottom flex-space-between" @click.stop>
        <view class="item flex-direction-column">
          <image src="/pagesA/static/image/35.png"></image>
          <text>微信好友</text>
          <button class="button" open-type="share" @click="tools.shareWx()"></button>
        </view>
        <view class="item flex-direction-column" @click="emit('poster', true)">
          <image src="/pagesA/static/image/34.png"></image>
          <text>生成海报</text>
        </view>
      </view>
    </view>
  </u-mask>
</template>

<script setup lang="ts">
import tools from '@/utils/tools'
const emit = defineEmits(['close', 'poster'])
const props = defineProps({
  isShow: {
    type: Boolean,
    default() {
      return false
    }
  }
})
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  bottom: 0;
  position: absolute;
  background-color: #fff;
}
.header {
  width: 100%;
  height: 76rpx;
  color: #333333;
  font-size: 32rpx;
  line-height: 76rpx;
  position: relative;
  text-align: center;
  background-color: #eeeeee;
  border-radius: 10rpx 10rpx 0px 0px;
  .close {
    top: 30rpx;
    right: 38rpx;
    width: 20rpx;
    height: 20rpx;
    position: absolute;
  }
}
.bottom {
  margin: 54rpx 120rpx;
  .item {
    position: relative;
    align-items: center;
    justify-content: center;
    .button {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      border: none;
      position: absolute;
      background-color: transparent;
    }
    image {
      width: 90rpx;
      height: 90rpx;
    }
    text {
      height: 36rpx;
      font-size: 28rpx;
      line-height: 32rpx;
      color: #333333;
      margin-top: 14rpx;
    }
  }
}
</style>
